<template>
 <div class="brand">
            <div class="py-container">
                <ul class="brand-list">
                    <li class="brand-item">
                        <img src="./images/brand_21.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_03.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_05.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_07.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_09.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_11.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_13.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_15.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_17.png" />
                    </li>
                    <li class="brand-item">
                        <img src="./images/brand_19.png" />
                    </li>
                </ul>
            </div>
        </div> 
</template>

<script>
  export default {
    name:'Brand'
  }
</script>

<style lang="less" scoped>
  .brand {
        margin: 10px 0;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .brand-list {
                overflow: hidden;
                padding: 15px 0;
                background: #f7f7f7;
                line-height: 18px;

                .brand-item {
                    width: 120px;
                    float: left;
                    height: 37px;

                    img {
                        border-left: 1px dotted #ccc;
                        padding: 0 10px;
                    }

                    &:first-child {
                        img {
                            border-left: 0;
                        }
                    }
                }
            }
        }
    }
</style>